<template>
	<view class="identity-select-container">
		<uv-navbar placeholder title="代理范围" imgMode="widthFix" @leftClick="goBack"
			bgColor="linear-gradient(to bottom, #EAA8AD, #F4D1D1)" />
		<view class="select-prompt">选择您的代理范围</view>

		<view class="identity-options">
			<view v-for="option in options" :key="option.value" class="option-card" @click="selectOption(option.value)">
				<view class="option-content">
					<view class="option-icon">
						<image :src="option.icon"  />
					</view>
					<view class="option-label">{{ option.label }}</view>
				</view>
				<view class="option-selector">
					<view class="selector-circle" :class="{ 'selected': selectedOption === option.value }"></view>
				</view>
			</view>
		</view>
		<uv-popup ref="citySelectRef" mode="bottom">
			<view class="citySelect">
				<lstAgentSelect :level="selectedOption" :init="citySelectInit" @select="citySelect" />
			</view>
		</uv-popup>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	import lstAgentSelect from './components/lst-agent-select.vue'

	import {
		onLoad
	} from '@dcloudio/uni-app'
	const options = ref([
		// {
		// 	value: '1',
		// 	label: '省代理',
		// 	icon: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/c4d71202508160921435133.png'
		// },
		// {
		// 	value: '2',
		// 	label: '市代理',
		// 	icon: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/c4d71202508160921435133.png'
		// },
		{
			value: '3',
			label: '区/县代理',
			icon: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/01f72202508160922218299.png'
		},
		// {
		// 	value: '4',
		// 	label: '街道/乡镇代理',
		// 	icon: 'https://linshitong.oss-cn-shenzhen.aliyuncs.com/dev/image/2025/0816/5308e202508160921083758.png'
		// }
	])
	const selectedOption = ref('1')
	const selectOption = (value) => {
		model.agent_level = value*1;
		selectedOption.value = value*1;
		console.log('---selectedOption.value---',selectedOption.value)
		citySelectRef.value.open();
	}
	const model = reactive({
		selName: '',
		agent_level: 1,
		province_id: '',
		city_id: '',
		area_id: '',
		town_id: ''
	})
	const citySelectRef = ref(null)
	const citySelectInit = computed(() => {
		const {
			province_id,
			city_id,
			area_id,
			town_id
		} = model
		if (province_id && city_id && area_id && town_id) {
			return [model.province_id, model.city_id, model.area_id, model
				.town_id
			]
		} else if (province_id && city_id && area_id) {
			return [model.province_id, model.city_id, model.area_id]
		} else if (province_id && city_id) {
			return [model.province_id, model.city_id]
		} else if (province_id) {
			return [model.province_id]
		} else {
			return []
		}
	})

	// 选择代理范围
	const citySelect = (e) => {
		citySelectRef.value.close()
		if (e) {
			model.agent_level = selectedOption.value;
			model.selName = e.map(e => e.name).join('/')
			if (selectedOption.value == '1') {
				model.province_id = e[0].id
			} else if (selectedOption.value == '2') {
				model.province_id = e[0].id
				model.city_id = e[1].id
			} else if (selectedOption.value == '3') {
				model.province_id = e[0].id
				model.city_id = e[1].id
				model.area_id = e[2].id
			} else if (selectedOption.value == '4') {
				model.province_id = e[0].id
				model.city_id = e[1].id
				model.area_id = e[2].id
				model.town_id = e[3].id
			}
			// 获取事件通道
			const eventChannel = getCurrentPages()[getCurrentPages().length - 1].getOpenerEventChannel()
			eventChannel.emit('acceptRange', {
				data: model
			})
			uni.navigateBack()
		}
	}

	onLoad((option) => {

	})

	const goBack = () => {
		uni.navigateTo({
			url: '/pages-agent/join/agent'
		})
	}
</script>

<style lang="scss" scoped>
	.identity-select-container {
		width: 100%;
		background-color: #f5f5f5;

		.citySelect {
			height: calc(90vh - var(--window-top));
		}
	}

	.select-prompt {
		color: #000;
		font-size: 16px;
		font-weight: 600;
		height: 48px;
		line-height: 48px;
		padding-left: 10px;
	}

	.identity-options {
		max-width: 500px;
		padding: 0 10px;
		margin: 0 auto;
	}

	.option-card {
		border-radius: 10px;
		padding: 10px;
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		cursor: pointer;
		transition: all 0.3s ease;
	}

	.option-card:hover {
		transform: translateY(-3px);
		box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
	}

	.option-content {
		display: flex;
		align-items: center;
	}

	.option-icon image {
		width: 80px;
		height: 80px;
		margin-right: 15px;
	}

	.option-label {
		font-size: 16px;
		color: #333;
	}

	.option-selector {
		width: 24px;
		height: 24px;
		border: 2px solid #ccc;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.selector-circle {
		width: 16px;
		height: 16px;
		border-radius: 50%;
		background: transparent;
		transition: background 0.3s ease;
	}

	.selector-circle.selected {
		background: #4A90E2;
	}
</style>